<template>
  <div class="m-box">
    <div class="m-box__header" v-if="props.title">
      <dv-decoration-7>
        <div :class="['title', props.size]">
          <slot name="header" v-if="slots.header" />
          <div v-else v-html="props.title"></div>
        </div>
      </dv-decoration-7>
    </div>
    <div class="m-box__body">
      <dv-border-box-7><slot /></dv-border-box-7>
    </div>
  </div>
</template>

<script setup>
/**
 * 使用方法：
 *  <m-box title="进出库明细">xxxxx</m-box>
 *
 * props:
 *    title   标题
 *
 */
import { getCurrentInstance, ref } from 'vue'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: 'default' // default-默认 small-小
  }
})

const instance = getCurrentInstance()
const slots = instance.slots
// console.log('slots', slots)
</script>
<style lang="less" scoped>
@themeColor: rgb(36, 36, 163);
@fontColor: rgb(77, 77, 178);
@fontColor: #FFF;
.m-box {
  width: 100%;
  height: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  .m-box__header {
    ::v-deep(.dv-decoration-7) {
      justify-content: normal;
      svg {
        transform: scale(0.5);
      }
      .title {
        // padding-top: 10px;
        padding-left: 0;
        line-height: 2;
        font-size: 18px;
        letter-spacing: 0.2em;
        // color: rgb(94, 215, 237);
        color: @fontColor;
        &.small {
          font-size: 14px;
        }
        &.mini {
          font-size: 12px;
        }
      }
      svg:last-child {
        display: none;
      }
    }
  }
  .m-box__body {
    flex: 1;
    overflow: auto;
    .dv-border-box-7 {
      padding: 8px;
    }
  }
}
</style>
